import CountUI from '../../components/Count'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
//引入action
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from '../../redux/count_action'

//函数返回对象中的key作为传递给UI组件props的key
//value作为传递给UI组件props的value，用于传递状态对象
// const mapStateToProps = state => {
//     return {count:state}
// }
//简写
//箭头函数的返回值如果只有一行，那么可以省略return和括号。
//但是要求返回的是一个表达式，但是{count:state}并不是一个表达式而是字面量
//如果是字面量，需要用()包裹起来
//UI里面this.props.count来源于这里
const mapStateToProps = state =>  ({count:state})

//函数返回的对象中的key就作为传递给UI组件props的key
//value就作为传递给UI组件props的value，用于传递操作对象
const mapDispatchToProps = (dispatch) => {
    return {
        //通知redux执行操作
        add: number  => dispatch(createIncrementAction(number)),
        sub: number  => dispatch(createDecrementAction(number)),
        addAsync: (number,time) => dispatch(createIncrementAsyncAction(number,time)),
    }
}

//创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)